<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <style>
        .chat-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .message-container {
            height: 400px;
            border: 1px solid #ccc;
            overflow-y: auto;
            margin-bottom: 20px;
            padding: 10px;
        }
        .input-container {
            display: flex;
            gap: 10px;
        }
        input {
            flex: 1;
            padding: 5px;
        }
        button {
            padding: 5px 15px;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="message-container" id="messageContainer"></div>
        <div class="input-container">
            <input type="text" id="username" placeholder="用户名">
            <input type="text" id="message" placeholder="输入消息">
            <button onclick="connect()">连接</button>
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        let stompClient = null;
        let token = null;

        function connect() {
            const username = document.getElementById('username').value;
            if (!username) {
                alert('请输入用户名');
                return;
            }

            // 获取token
            fetch('http://localhost:8080/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username: username })
            })
            .then(response => response.text())
            .then(t => {
                token = t;
                const socket = new SockJS('/ws');
                stompClient = Stomp.over(socket);
                stompClient.connect({ 'Authorization': 'Bearer ' + token }, function(frame) {
                    console.log('Connected: ' + frame);
                    stompClient.subscribe('/topic/public', function(message) {
                        showMessage(message.body);
                    });
                    stompClient.send("/app/chat.addUser", {}, username);
                });
            });
        }

        function sendMessage() {
            const message = document.getElementById('message').value;
            if (message && stompClient) {
                stompClient.send("/app/chat.sendMessage", {}, message);
                document.getElementById('message').value = '';
            }
        }

        function showMessage(message) {
            const messageContainer = document.getElementById('messageContainer');
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messageContainer.appendChild(messageElement);
            messageContainer.scrollTop = messageContainer.scrollHeight;
        }
    </script>
</body>
</html> 